<template>
	<view class="main">
		<delVue :Visible="isshow" @isModal="modal" @goStay="stay" :oneText="one" :twoText="two" :threeText="three"
			:fourText="four" />

		<delVue :Visible="show" @isModal="gomodal" @goStay="gostay" :oneText="one" :twoText="two" :threeText="threeText"
			:fourText="fourText" />
		<view class="title">
			<view class="bg" :class="title != '' ? 'bg-color' : ''">

				<u-icon @click="goBack" size="36" name="arrow-left"></u-icon>
				<text>{{title}}</text>
				<view class="">
				</view>
			</view>
			<view class="tabs-box">
				<u-tabs bar-width='100' inactive-color="#808080" bar-height="4" active-color="#CCA566" :list="list"
					:is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
		</view>
		<view class="box" v-if="token">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="" v-if='register.length>0'>
					<view class="client" v-for="(item,index) in register" @click.stop="goregistration(item)">
						<view class="client-tit">
							<view class="tit">
								<text>就诊人：</text>
								<text>{{item.patientName || ''}}</text>
							</view>

							<view
								:class="item.status == 200 ? 'success-text' : (item.status == 100 ? 'paid-text' : (item.status == 300 ? 'gray-text' : ''))">
								{{regListStatus(item.status)=="已支付"?'预约成功':regListStatus(item.status)}}
							</view>
						</view>
						<view class="client-con">
							<view class="con-top">
								<image :src="item.hisDoctorVo.photoUrl" mode=""></image>
								<view class="text-info">
									<text class="name">{{item.doctorName}}</text>
									<text class="level">{{synthesis[item.hisDoctorVo.level].dictLabel}}</text>
									<text class="su">|</text>
									<text class="office">{{item.hisDoctorVo.title}}</text>
								</view>
							</view>
							<view class="con-con">
								<view class="one">
									<view class="one-le">
										医院
									</view>
									<view class="one-ri">
										成都西南中医医院
									</view>
								</view>
								<view class="one">
									<view class="one-le">
										就诊日期
									</view>
									<view class="one-ri">
										{{item.registrationTime}}
									</view>
								</view>
								<view class="one">
									<view class="one-le">
										挂号费
									</view>
									<view class="one-ri one-color">

										{{item.totalPrice>0 ? `￥${item.totalPrice}`:'免费'}}
									</view>
								</view>
							</view>
						</view>
						<view class="con-bot">
							<view class="btn gray" @click.stop="Cancel(item.status,item)" v-if="item.status==100">
								取消订单
							</view>
							<view class="btn gray" @click.stop="refund(item)" v-if="item.status==200">
								申请退号
							</view>
							<view class="btn gray" @click.stop="goregistration(item)" v-if="item.status==100">
								订单详情
							</view>
							<view class="bot-btn" v-for="(it,ind) in status" :key="index"
								>
								<view @click.stop="handleStatusChange(item.status,item)" class="btn" v-if="item.status==it.dictValue">
									{{it.dictLabel=='待支付'? it.dictLabel:'订单详情'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no" v-else>
					<u-empty text="暂无订单" mode="list"></u-empty>
				</view>
			</scroll-view>
		</view>
		<view class="notlogin" v-else @click="login">
			<view class="">
				你还未登录
			</view>
			<view class="">
				去登录
			</view>
		</view>

	</view>


</template>

<script>
	import {
		toast,
		getStore,
		setStore,
		getDate,
		validateIdCard
	} from "@/utils";
	import delVue from '../../components/del.vue';
	import {
		delRegistration,
		getregistration,
		getRegistrations,
		putReg,
		payOrders
	} from '../../service/api.js'
	export default {
		components: {
			delVue
		},
		data() {
			return {
				isshow: false,
				one: "再想想",
				two: "确定取消",
				three: "退号每月超过5次后将会加入黑名单影响您正常预约挂号，确定是否退号？",
				four: "提示",


				show: false,

				threeText: "是否取消订单",
				fourText: "提示",
				title: "挂号订单",
				list: [{
						name: '全部',
						status: ""
					}, {
						name: '待支付',
						status: "100"
					}, {
						name: '待就诊',
						status: "200"
					},
					{
						name: '已退号',
						status: "300,500"
					},
				],
				params: {
					memberId: "",
					status: "",
				},
				register: [],
				id: "",
				status: [],
				current: 0,
				synthesis: [],
				token: "",
				Visible: "",
			}
		},
		computed: {

		},
		onShow() {
			this.token = getStore("token") || null;

		},
		async mounted() {
			await this.getlevel();
			await this.getStatus(); // 获取状态字典数据
			await this.getreglist(); // 获取挂号记录数据
		},
		async onLoad(options) {
			if (options.status) {
				this.params.status = options.status;
				await this.getreglist();
			}
			this.getlevel()

		},
		methods: {
			async getlevel() {
				let res = await getregistration("doctor_level")
				if (res.code == 200) {

					this.synthesis = res.rows;
				}
			},

			//返回我的页面
			goBack() {
				uni.switchTab({
					url: "/pages/my/index"
				})
			},
			login() {
				uni.navigateTo({
					url: `/My/oneClicklogin/login`
				})
			},
			gostay(item) {

				this.delReg(item)
			},
			//取消预约
			async delReg(item) {
				let res = await delRegistration({
					id: this.id
				});
				if (res.code == 200) {
					toast("订单已取消");
					this.show = item;
					this.getreglist();
				} else {
					this.show = item;
				}
			},
			//取消预约
			Cancel(status, item) {
				this.show = true;
				this.id = item.id
			},
			gomodal() {
				this.show = false
			},
			refund(item) {
				this.id = item.id;

				this.isshow = true;
			},
			//这里执行退号操作
			stay(item) {

				this.refundReg(item)
			},
			modal(item) {
				this.isshow = item;
			},
			//申请退款方法
			async refundReg(item) {
				let res = await putReg({
					id: this.id
				})
				if (res.code == 200) {
					toast("退号已申请");
					this.isshow = item;
					this.getreglist();
				} else {
					toast(res.msg);
					this.isshow = item;
				}

			},
			goregistration(item) {
				item.dictLabel = this.synthesis[item.hisDoctorVo.level].dictLabel
				let statusItem = this.status.find(s => s.dictValue == item.status);
				item.name = statusItem ? statusItem.dictLabel : '未知状态';
				uni.navigateTo({
					url: `/My/registerDetails/index?item=${JSON.stringify(item)}`
				})
			},
			//请求医生等级
			async getlevel() {
				let res = await getregistration("doctor_level")
				if (res.code == 200) {
					this.synthesis = res.rows;
				}
			},

			//状态判断
			// 状态判断
			regListStatus(item) {
				// 假设status是一个包含字典项的数组，查找与item匹配的status项
				let statusItem = this.status.find(s => s.dictValue == item); // 查找与item匹配的状态
				return statusItem ? statusItem.dictLabel : '未知状态'; // 返回状态标签，如果没有匹配项则返回'未知状态'
			},


			regListCss(item) {
				// 假设status是一个包含字典项的数组，查找与item匹配的status项
				let statusItem = this.status.find(s => s.dictValue == item); // 查找与item匹配的状态
				return statusItem ? statusItem.cssClass : 'text'; // 返回状态标签，如果没有匹配项则返回'未知状态'
			},


			lower() {},

			viewOrderDetails(statusValue) {
				switch (statusValue) {
					case '100':
						this.doSomethingForStatus2();
						break;
					case '200':
						this.doSomethingForStatus3();
						break;
					default:

						break;
				}


			},
			handleStatusChange(statusValue, item) {
				debugger
				switch (statusValue) {
					//待支付
					case "100":
					console.log("是否进这里")
						this.doSomethingForStatus1(item);
						break;
						//已支付
					case "200":
						this.goregistration(item)
						break;
						//已取消
					case '300':
						this.goregistration(item)
						break;
						//已完成
					default:
						this.goregistration(item)
						break;
				}
			},
			//立即支付
			async doSomethingForStatus1(item) {
				this.paySign(2, item); //立即支付
			},

			async paySign(index, item) {

				if (index == "1") {
					toast("支付宝支付暂未开放");
					return;
				}
				try {
					let params = {
						payType: index, //支付类型1:支付宝 2:微信
						orderNo: item.orderNumber,
					};
					let res = await payOrders(params);
					if (res.message == "未绑定微信！") {
						this.payBtnFlag = false;
						toast(res.message);
						setTimeout(() => {
							uni.navigateTo({
								url: "/My/setting",
							});
						}, 1500);
						return;
					}
					let data = res.data;

					uni.requestPayment({
						provider: "wxpay",
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: (res) => {
							if (res.errMsg === "requestPayment:ok") {
								this.getreglist();
								toast("支付成功，耐心等候");
								this.goregistration(item);
							}
						},
						fail: (err) => {
							toast("支付失败");
							setTimeout(() => {

							}, 1500);
						},
					});
				} catch (error) {

				}
			},



			//取消订单
			doSomethingForStatus2() {
				this.isshow = true;
			},
			//申请退号
			doSomethingForStatus3() {
				console.log('执行状态 3 对应的操作');
				// 在这里执行状态 3 对应的逻辑
			},
			change(index) {
				this.current = index;
				this.params.status = this.list[index].status;
				this.getreglist();
			},
			//获取挂号记录列表
			async getreglist() {
				let info = JSON.parse(getStore("info")) || {};
				this.params.memberId = info.id;
				let res = await getRegistrations(this.params);
				if (res.code==200) {
					this.register = res.rows;
				}
			},
			async getStatus() {
				let res = await getregistration("registration_status");
				if (res.code) {
					this.status = res.rows;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 275rpx;
	}

	.title {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;

		background: #fff;
	}

	.notlogin {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: calc(100vh - 340rpx);

		view {
			color: #B3B3B3;
		}

		view:last-child {
			width: 140rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			padding: 12rpx 0;
			text-align: center;
			color: #fff;
			background: #CCA566;
		}
	}

	.box {


		.scroll-Y {
			height: calc(100vh - 340rpx);
		}

		.client {
			width: 654rpx;
			background: #fff;
			padding: 24rpx;
			border-radius: 16rpx;
			margin: auto;
			margin-top: 24rpx;

			.client-tit {
				display: flex;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #E6E6E6;

				.tit {
					font-weight: bold;
				}

			}

			.con-bot {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				.bot-btn {
					display: flex;


				}

				.btn {
					margin-left: 24rpx;
					width: 144rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-size: 24rpx;
					color: #CCA566;
					border-radius: 6rpx;
					border: 1rpx solid #CCA566;
				}

				.btn-color {
					color: #1A1A1A;
					border: 1rpx solid #E6E6E6;
				}
			}

			.client-con {

				.con-top {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					// border-bottom: 1rpx solid #E6E6E6;

					image {
						width: 80rpx;
						height: 80rpx;
						margin-right: 16rpx;
						border-radius: 50%;
					}

					.text-info {
						display: flex;
						align-items: center;

						.name {
							font-weight: 600;
							font-size: 32rpx;
							margin-right: 16rpx;
						}

						.level {
							font-weight: 400;

						}

						.su {
							font-size: 24rpx;
							color: #E6E6E6;
							margin: 0rpx 5rpx;
						}

						.office {}
					}

				}

				.con-con {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					.one {
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;

						margin-bottom: 16rpx;

						.one-le {
							color: #808080;
						}

						.one-ri {
							color: #1A1A1A;
							font-weight: bold;
						}

						.one-color {
							color: #FF7C54;
						}
					}

					.one:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.gray {
		color: #1a1a1a !important;
		border: 1rpx solid #E6E6E6 !important;
	}

	::deep.u-size-medium {
		height: 60rpx !important;
		line-height: 60rpx !important;
		padding: 0 40rpx !important;
	}

	.no {
		justify-content: center;

		display: flex;
		align-items: center;
		height: 100%;
	}

	.success-text {
		color: #18BD68;
	}

	.paid-text {
		color: #FF7C54;
	}

	.gray-text {
		color: #B3B3B3;
	}

	.bg {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		padding-top: 65rpx;


		.title-img {
			width: 100rpx;
		}

		text {
			display: inline-block;

			color: #1a1a1a;
			font-size: 32rpx;
			font-weight: bold;
		}

		view {
			width: 100rpx;
		}
	}

	::deep.u-tab-bar {
		bottom: -4rpx;
	}
</style>